<template>
	<view class="box">

		<view class="box1">
			<span>头像</span>
			<view class="box1-item" @click="tu">
				<image :src="list.png" mode=""></image>
				<span style="	color: gainsboro;">></span>
			</view>
		</view>

		<view class="box2">
			<span>姓名</span>
			<view class="box1-item">
				<span><input type="text" v-model="list.name" @change="change1" /></span>
			</view>
		</view>
		<view class="box2">
			<span>手机号</span>
			<view class="box1-item">

				<span><input type="number" :value="list.phone" @change="change2" /></span>
			</view>
		</view>


		<view class="box2">
			<span>性别</span>
			<view class="box1-item">
				<span>
					<select-lay zindex="9999" :value="list.sex" name="name" :options="datalist"
						@selectitem="selectitem">
					</select-lay>
				</span>
			</view>
		</view>


		<view class="box2">
			<span>队伍</span>
			<view class="box1-item">
				<span @click="change">
					<input type="text" value="" :placeholder="items.text+items.test" disabled></input>
				</span>
			</view>
		</view>
		<button class="btn" @click="formSubmit">保存</button>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				qqq: "1",
				range: [],
				// valdata: {
				// 	name: this.xi,
				// 	phone: this.shou,
				// 	scs: this.ses,
				// },
				//模拟数据列表
				list: {
					name: '',
					phone: "",
					sex: "",
					png: [""],
				},
				items: {},
				datalist: [{
						label: "女",
						value: "value1"
					},
					{
						label: "男",
						value: "value2"
					}
				],
			}
		},
		onLoad(lists) {
			this.cha()
			this.item = lists.record
			this.items = JSON.parse(this.item)
		},
		methods: {
			//查询
			cha() {
				this.$api.cha().then((res) => {
					this.list = res.data[0]
				})
			},
			// //修改
			formSubmit(e) {
				const formData = {
					name: this.xi,
					phone: this.shou,
					sex: this.ses,
					png: this.list.png
				}
				this.$api.ti(formData).then((res) => {})
				// let pages = getCurrentPages(); //当前页面栈
				// // if (pages.length > 1) {
				// let beforePage = pages[pages.length - 2]; //获取上一个页面实例对象
				// beforePage.onLoad(beforePage.$vm.vvvvvvvvvvvvvvvv())
				// beforePage.data.refreshIfNeeded = true;
				// beforePage.onLoad() || beforePage.onShow();
				// };
				//页面栈
				// let pages = getCurrentPages();
				// let beforePage = pages[pages.length - 2];
				// beforePage.$vm.reFresh = Math.random()
				// // beforePage.$vm.vvvvvvvvvvvvvvvv()
				// // beforePage.onLoad(beforePage.$vm.vvvvvvvvvvvvvvvv())
				// this.$forceUpdate();
				// uni.navigateBack();
			},

			//图片上传
			tu() {
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						that.list.png = res.tempFilePaths[0]
					}
				});
			},
			selectitem(index, item) {
				this.ses = item.value
				if (index >= 0) {
					this.list.sex = item.value;

				} else {
					this.list.sex = ""
				}
			},
			change(e) {
				uni.navigateTo({
					url: './jia'
				})
			},
			change1(e) {
				this.xi = e.detail.value
			},
			change2(e) {
				this.shou = e.detail.value
			},
		}
	}
</script>
<style scoped lang="less">
	.box {
		margin: 30rpx;
	}

	.box1 {
		display: flex;
		line-height: 120rpx;
		height: 120rpx;
		border-bottom: gainsboro 2px solid;
		justify-content: space-between;
	}

	.box2 {
		display: flex;
		line-height: 80rpx;
		height: 80rpx;
		border-bottom: gainsboro 2px solid;
		justify-content: space-between;
	}

	.box1-item image {
		width: 70rpx;
		height: 70rpx;
		border-radius: 10%;
		margin-top: 30rpx;
		margin-right: 20rpx;
	}

	.box1-item {
		display: flex;
		justify-content: space-between;
	}

	.box1-item span {
		padding-right: 18rpx;
		font-size: 55rpx;

	}

	.box1-item span input {
		margin-top: 20rpx;
		padding-left: 15rpx;
		font-size: 25rpx;
		color: gray;
		border: 1px gray solid;
		width: 250rpx;
	}

	&/deep/.box1-item span select-lay .uni-select-lay-select {
		font-size: 25rpx;
		color: gray;
		height: 25px;
		border: 1px gray solid;
		margin-top: 20rpx;
		width: 270rpx !important;

	}

	&/deep/.uni-select {
		font-size: 25rpx;
		color: gray;
		height: 25px;
		border: 1px gray solid;
		margin-top: 20rpx;
		width: 270rpx !important;
	}

	.btn {
		margin-top: 50rpx;
		color: black;
		background-color: gainsboro;
		width: 50%;
		margin-left: 25%;
	}
</style>
